<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <div
    :class="['my-divider', orientation, { dashed: dash }]"
    :style="{ 'border-top-color': color }"
  >
    <div class="title">
      <slot>默认标题</slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    //控制标题文字位置
    orientation: {
      type: String,
      default: "left",
      validator(value) {
        return ["left", "center", "right"].includes(value);
      },
    },
    //控制分割线虚实
    dash: {
      type: Boolean,
      default: false,
    },
    //线条颜色控制
    color: String,
  },
};
</script>

<style lang="scss" scoped>
.my-divider {
  border-top: 2px solid #333;
  height: 0;
  margin: 50px 0;
}
.my-divider.left {
  text-align: left;
}
.my-divider.center {
  text-align: center;
}
.my-divider.right {
  text-align: right;
}
.my-divider.dashed {
  border-top-style: dashed;
}
.my-divider .title {
  display: inline-block;
  background-color: #fff;
  padding: 0 30px;
  margin: 0 50px;
  transform: translateY(-50%);
}
</style>
